<template>
	<view class="menu-box">
		<swiper :indicator-dots='true' class="swiper" @change="change" indicator-color='#D8D8D8' indicator-active-color='#0050A5'>
			<swiper-item v-for="item in listBox">
				<u-grid :border='false' :col="5" hover-class="hover-class">
					<u-grid-item @click="handNavTo(item2)" v-for="(item2, index) in item.list" :index="index" :key="index">
						<image class="menu-icon" :src="item2.imgUrl" mode=""></image>
						<text class="content-text">{{item2.name}}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
			<!-- 	<swiper-item>
				<u-grid :col="5" @click="click">
					<u-grid-item v-for="(item, index) in list" :index="index + 9" :key="index">
						<u-icon :name="item" :size="46"></u-icon>
						<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item> -->
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.configImgUrl,
				current: 0,
				listBox: [{
					list: [{
							name: '会员申请',
							imgUrl: '../../static/menuIcon/huiyuanshenqing.png',
							path: '/my/authVip/auth'
						},
						{
							name: '成果鉴定',
							imgUrl: '../../static/menuIcon/chengguojianding.png',
							path: '/worksDeclare/worksDeclare',
							query: 0
						},
						{
							name: '个人档案',
							imgUrl: '../../static/menuIcon/zuopinshenbao.png',
							path: '/personFile/personFile'
						},
						{
							name: '企业档案',
							imgUrl: '../../static/menuIcon/qiyedangan.png',
							path: '/companyFile/companyFile'
						},
						{
							name: '在线培训',
							imgUrl:'../../static/menuIcon/zaixianpeixun.png',
							path: '/onlineTrain/onlineTrain'
						},
					]
				}, {
					list: [{
							name: '协会活动',
							imgUrl: '../../static/menuIcon/xiehuihuodong.png',
							path: '/avtiveityConter/avtiveityConter'
						},
						{
							name: '作品申报',
							imgUrl: '../../static/menuIcon/zuopinshenbao.png',
							path: '/worksDeclare/worksDeclare',
							query: 1
						},
					]
				}],

			};
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			handNavTo(item) {
				uni.navigateTo({
					url: '/pages' + item.path + '?query=' + item.query || '',
					fail: function(err) {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.menu-box {
		width: 100%;

		.swiper {
			height: 220rpx;
		}

		.menu-icon {
			width: 92rpx;
			height: 92rpx;
			margin-bottom: 8rpx;
		}
	}
</style>
